<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OR Media Anesthesia Module</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <!-- 引入 echarts.js -->
      <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			background-color: #555;
			position: absolute;
			margin: 0;
			padding: 0;
		}

		.content {
			box-sizing: border-box;
			min-width: 1200px;
			margin: 20px;
			padding: 0.5cm;
			color: white;
			background-color: #111;
		}

		tr td {
			border-bottom: #333;
		}

		.yellow {
			color: #ffD700;
		}

		table.tdpad td {
			padding: 10px;
		}

		table {
			color: white;
		}

		.formtitle {
			font-size: 20px;
			font-weight: bold
		}

		.underline {
			text-decoration: underline;
		}

		.textpad {
			padding-left: 10px;
			padding-right: 10px;
		}

		.w3-bold {
			font-weight: bold;
		}

		.verticaltext {
			writing-mode: vertical-rl;
			text-orientation: upright;
		}

		.redslot {
			border: solid red 2px;
			border-radius: 10px;
			background-color: rgba(255, 0, 0, 0.3);
			color: white;
			font-weight: bold;
			text-align: center;
			line-height: 20px;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		table.tdborder td {
			border: 1px solid #666;
		}

		.w3-input {
			height: 22px;
		}
	</style>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.css">
	</link>
</head>

<body>
	<div class="content">
		<div class="w3-text-white" style="padding-top:10px; font-size:20px;padding-bottom:10px">Anesthesia Info Module
		</div>
		<table width="100%">
			<tr rel="data-fentayl">
				<td class="yellow">Fentanyl</td>
				<td>450</td>
				<td class="yellow">ug</td>
				<td><span style="padding-right:100px">100</span>100<span style="padding-left:30px">100</span><span
						style="padding-left:100px">100</span></td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Rocuronium</td>
				<td>300</td>
				<td class="yellow">mg</td>
				<td>200</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Propoful</td>
				<td>100</td>
				<td class="yellow">mg</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Isofluorine</td>
				<td></td>
				<td class="yellow">%</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">O<sub>2</sub></td>
				<td>1100.25</td>
				<td class="yellow">L</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Air</td>
				<td>540</td>
				<td class="yellow">L</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2">
					<div class="redslot larget">
						<div class="title">Arterial</div>
						<div class="data">130/67 102</div>
					</div>
					<div class="redslot">
						<div class="title">HR</div>
						<div class="data">63</div>
					</div>
					<div class="redslot">
						<div class="title">BP</div>
						<div class="data">81</div>
					</div>
					<div class="redslot">
						<div class="title">EtCO<sub>2</sub></div>
						<div class="data">30.8</div>
					</div>
					<div class="redslot">
						<div class="title">SpO<sub>2</sub></div>
						<div class="data">91.6</div>
					</div>
					<div class="redslot">
						<div class="title">RR</div>
						<div class="data">13</div>
					</div>
					<div class="redslot">
						<div class="title">FiO<sub>2</sub></div>
						<div class="data">81</div>
					</div>
					<div class="redslot">
						<div class="title">TV</div>
						<div class="data">540</div>
					</div>
					<div class="redslot">
						<div class="title">Tgen</div>
						<div class="data">96.8</div>
					</div>
				</td>
                <td colspan="2">
                    <!-- <canvas id="sysChart"></canvas> -->
                
                 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="sysChart" style="width: 600px;height:400px;"></div></td>
			</tr>
		</table>
	</div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sysChart'));
   


        function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    };
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};


setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });

}, 1000);

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);


    </script>
</body>

</html>